<template>
  <div v-if="dialog.show">
    <el-dialog
      class="elDialog"
      :title="dialog.title"
      :visible.sync="dialog.show"
      :width="dialog.width"
      :top="dialog.top"
      destroy-on-close
      append-to-body
      :close-on-click-modal="false"
    >
      <slot />
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Dialog",
  props: {
    dialog: Object,
    default: () => {
      return {
        show: false,
        title: "详情",
        width: "30%",
        top: "25vh",
      };
    },
  },
};
</script>

<style scoped lang="scss">
.elDialog::v-deep {
  .el-dialog__header {
    display: flex;
    justify-content: space-between;
    .el-dialog__title {
      font-size: 0.2rem;
    }
    .el-dialog__headerbtn {
      font-size: 0.2rem;
    }
  }
  .el-dialog__body {
    padding-top: 0;
    .dialog-footer {
      text-align: center;
      .el-button {
        margin-left: 0.2rem;
      }
      .el-button--default {
        background: #3a3d51;
        color: #fff;
        border: 1px solid rgba(255,255,255,.14);
      }
    }
    .el-form-item {
      .el-form-item__label {
        color: #fff;
        font-weight: 400;
      }
      .el-date-editor,
      .el-input__inner,
      .el-input-number,
      .el-cascader,
      .el-select {
        width: 100%;
      }
    }
    .el-button--primary.is-plain {
      background: rgba(0, 0, 0, 0);
      border: 1px solid #409eff;
    }
  }
}
</style>
